<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="box">2<span>我是span</span></div>
        <div class="box3">3</div>
    </div>
    <script>
        // dom的其他操作
        // 一.增加  
        // 1.innerHTMl 2.innerText 
        // 3.创建元素节点  document.createElement(); 添加 appendChild 、insertBefore
        // 二、修改 ：替换元素；
        // var containerEle = document.querySelector(".container");
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     var ele = document.createElement("div");
        //     ele.innerHTML = "我是创建的div";
        //     // 替换操作： 先删除在添加；
        //     containerEle.replaceChild(ele,boxEle);
        // }
        // 三、删除 ；属性（名词）没有括号； 方法（动词）:需要括号
        // 1.remove() 当前元素.remove();
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     boxEle.remove();
        // }

        // 2.removeChild();父级.removeChlid(要移除的子元素)
        // var containerEle = document.querySelector(".container");
        // var boxEle = document.querySelector(".box"); 
        // document.onclick = function(){
        //     containerEle.removeChild(boxEle);
        // }

        // 四、克隆节点
        // cloneNode()里面有参数 默认是false 只会克隆最外层标签 不会克隆里面的内容和子元素
        // 如果参数给true 那么会克隆 自身元素 和子元素内容；
        var containerEle = document.querySelector(".container");
        var boxEle = document.querySelector(".box"); 
        var box3Ele = document.querySelector(".box3")
        document.onclick = function(){
            var ele = boxEle.cloneNode(true);
            containerEle.insertBefore(ele,box3Ele);
        }





    </script>
</body>
</html>